﻿
<style type="text/css">
    #container {
        min-width: 310px;
        max-width: 800px;
        height: 400px;
        margin: 0 auto
    }
</style>
<script src="~/Scripts/highCharts/highcharts.js"></script>
<script src="~/Scripts/highCharts/exporting.js"></script>
<script src="~/Scripts/highCharts/series-label.js"></script>

<ul class="list-inline">
    <li>
        <span>起始日期：<input type="date" id="date1" pattern="yyyy/mm/dd" /></span>
    </li>
    <li>
        <span>截止日期：<input type="date" id="date2" pattern="yyyy/mm/dd" /></span>
    </li>
    <li><input type="button" class="btn btn-block" value="查看" onclick="getIncome($('#date1').val(),$('#date2').val())"/></li>
</ul>
<div id="container"></div>
<a href="javascript:void(0)" id="output" class="btn btn-info">导出</a>
<script src="~/Scripts/jquery-2.0.3.min.js"></script>
<script>
    var chart;
    $(function () {
       
        getIncome("0001/01/01","0001/01/01");
        
    })
    function getIncome(date1, date2) {
  
        $.ajax({
            type: 'post',
            url: "/Emp/GetIncomeTable",
            async: true,
            dataType: 'json',
            data: {'startTime':date1,'endTime':date2},
            success: function (data) {
                var x = "";
                var y = "";
                for (var i = 0; i < data.length; i++) {
                    if (i == 0) {
                        x += "'" + data[i].Date + "'";
                        y += data[i].Income1;
                    }
                    else {
                        x += ",'" + data[i].Date + "'";
                        y += "," + data[i].Income1;
                    }
                }

                var options = {
                    title: {
                        text: '销售额'
                    },
                    subtitle: {
                        text: '选定时间内的收入情况'
                    },
                    xAxis: {
                        categories: eval("[" + x + "]")
                    },
                    yAxis: {
                        title: {
                            text: '人民币(￥)'
                        }
                    },
                    plotOptions: {
                        line: {
                            dataLabels: {
                                enabled: true
                            },
                            enableMouseTracking: false
                        }
                    },
                    series: [{
                        name: '销售额',
                        data: eval("[" + y + "]")
                    }]

                };

                chart = new Highcharts.Chart('container', options);
            }
        });
    }

    $('#output').click(function () {
        chart.exportChartLocal();
    });
</script>